<template>
	<div class="hbnav">
		<ul>
			<li :class="{'active':orderNavindex==0}" @click="discounttab(0)">店铺优惠券</li>
			<li :class="{'active':orderNavindex==1}" @click="discounttab(1)">平台优惠券</li>
			<li :class="{'active':orderNavindex==2}" @click="discounttab(2)">已失效</li>
		</ul>
		<span class="hbNavbiao"></span>
	</div>
</template>

<script>
	export default{
		name:'hbnav',
		props:['msg'],
		data(){
			return{
				orderNavindex:0
			}
		},
		created:function(){
			
			
		},
		mounted:function(num){
			
		},
		methods:{
			discounttab:function(num){
				this.orderNavindex=num;
				var self=this;
				$(".hbNavbiao").css("left",self.orderNavindex*33.3+10.6+'%');
				this.$emit('sendindex',num);
			}
		}
	}
</script>

<style>
	.hbnav{
		position:fixed;
		top:0;
		left:0;
		right:0;
		height:0.9rem;
		font-size:0;
		background-color:#fff;
		box-sizing: border-box;
		box-shadow: 0 -0.18rem 0.4rem 0rem #4b9c31;
		z-index: 999;
	}
	.hbnav ul{
		z-index: 99;
	}
	.hbnav ul li{
		text-align: center;
		display: inline-block;
		height:0.86rem;
		width:33.3%;
		box-sizing: border-box;
		line-height: 0.86rem;
	}
	.hbnav ul li {
		font-size:0.28rem;
		color:#666;
	}
	.hbnav ul .active {
		color:#fb9722;
	}
	.hbNavbiao{
		width:0.88rem;
		height:0.04rem;
		border-radius:0.04rem;
		background-color:#fb9722;
		display: inline-block;
		position:absolute;
		bottom:0;
		left:12%;
		z-index: 999;
	}
</style>